以github上backbone.js经典例子进行分析：
1、todo.js
$(function(){
var Todo = Backbone.Model.extend({});//定义Todo模型
var TodoList = Backbone.Collection.extend({});//定义TodoList集合
var Todos = new TodoList;//实例化TodoList集合
var TodoView = Backbone.View.extend({});//定义TodoView视图
var AppView = Backbone.View.extend({});//定义AppView视图
var App = new AppView;//实例化AppView视图
})
实例化TodoList集合，会自动触发TodoList的初始化，初始化函数未进行任何操作。
实例化AppView视图，会自动触发AppView的初始化，初始化函数功能如下：
initialize: function() {
this.input = this.$("#new-todo");
this.allCheckbox = this.$("#toggle-all")[0];
this.listenTo(Todos, 'add', this.addOne);
this.listenTo(Todos, 'reset', this.addAll);
this.listenTo(Todos, 'all', this.render);
this.footer = this.$('footer');
this.main = $('#main');
Todos.fetch();
}
可以看到AppView视图在Todos集合实例上注册了监听,监听Todos的add事件。
AppView视图上绑定了事件
events: {
"keypress #new-todo": "createOnEnter",
"click #clear-completed": "clearCompleted",
"click #toggle-all": "toggleAllComplete"
}
createOnEnter事件如下：
createOnEnter: function(e) {
if (e.keyCode != 13) return;
if (!this.input.val()) return;
Todos.create({title: this.input.val()});
this.input.val('');
}
createOnEnter触发了Todos的create事件。而create事件触发this.add().所以Todos的add事件被触发，则触发this.addOne事件。在addone事件里新建一个TodoView的实例。
这个流程的触发点是：AppView视图上绑定了事件。那么为什么视图的events属性就能实现绑定事件的操作呢？让我们来钻一下牛角尖。
视图的构造函数里有这么一个操作this._ensureElement()：
var View = Backbone.View = function(options) {
this.cid = _.uniqueId('view');
_.extend(this, _.pick(options, viewOptions));
this._ensureElement();
this.initialize.apply(this, arguments);
};
我们来看一下this._ensureElement()都做了些什么。它调用this.setElement，而在setElement方法里调用了事件绑定函数：this.delegateEvents();在this.delegateEvents()中对事件进行了delegate。视图对象通过delegate()方法绑定事件，意味着我们不需要关心视图结构变化对事件产生的影响，同时也说明events中选择器所对应的元素必须处于视图的el元素之内，否则绑定的事件是无法生效的。尽管如此，有些情况下可能我们仍然需要手动绑定和解除事件，视图对象提供了delegateEvents()和undelegateEvents()方法用于动态绑定和解除events事件列表，你可以通过查看API文档来了解它们。
下面让我们整理一下这个流程：
整个过程的触发就是在控制器以及视图的实例化时。那么控制器和视图的实例化分别做了什么呢？
a)控制器的实例化
如图，在集合里新建了一个模型对象。此对象与集合有映射关系，模型对象变化会导致集合变化。
b)视图的实例化
在视图里定义初始化函数，实例化时进行视图的初始化，初始化时对控制器实例的特定事件（add、reset、all）进行监听。
对于add事件：回调函数进行实例化视图TodoView、渲染视图操作。
事件的绑定是在视图实例化时进行的。